<script setup>
import {onBeforeUnmount, reactive, ref} from 'vue'
import {getDateTimeFormatNow} from "@/utils/DateUtils.js";

const props = defineProps({
  content: {type: String, default: ''}
})

/**
 * 个性签名打字机效果
 */
const content = ref("")
let internalWrite = setInterval(writing, 450)
let internalClear = null
let idx = 0
function writing() {
  content.value += props.content[idx++]
  // 最多 15 个字
  if (content.value.length >= props.content.length) {
    idx = 0
    clearInterval(internalWrite)
    internalClear = setInterval(clear, 100)
  }
}
function clear() {
  content.value = content.value.slice(0, -1)
  if (content.value.length <= 0) {
    content.value = ''
    clearInterval(internalClear)
    internalWrite = setInterval(writing, 450)
  }
}

/**
 * 组件卸载前清除定时器
 */
onBeforeUnmount(() => {
  clearInterval(internalWrite)
  clearInterval(internalClear)
})
</script>

<template>
  <div class="type-write flex justify-start">
    <p class="content">
      {{ content }}
    </p>
  </div>
</template>

<style scoped>
.content {
  max-width: 100%;
  
  height: 1rem;
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  
  &::after {
    position: absolute;
    right: -0.3rem;
    bottom: -0.3rem;
    height: 1rem;
    border: 1px solid #fff;
    animation: typewriting ease-in-out 0.6s infinite;
    content: "";
  }
}

@keyframes typewriting {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>